<html>
<head>
	<title>Translator options</title>

	<style type="text/css">
		#main {
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
			padding-left: 20px;
			padding-top: 5px;
		}
		
		.block {
			padding-bottom: 10px;
		}
		
		.block .content {
			padding-left: 0px;
		}
		
		h3 {
			margin-bottom: 10px;
		}
		
		div.float-left {
			float: left;
		}

		.language-list select {
			width: 180px;
		}

		.add-lang {
			padding: 50px 10px 0 10px;
		}

		.add-lang button {
			width: 40px;
		}
		
		.hot-key .key {
			padding-top: 5px;
		} 
	</style>
	
</head>

<body>
	<div id="main">
		<div class='block'>
			<h3>Languages used for translation:</h3>
			<div class='content'>
				<div class="float-left language-list">
					<select id="languageList" multiple="multiple" size="10">
					</select>
				</div>
				<div class="float-left add-lang">
					<div>
						<button id="selectButton" >></button>
					</div>
					<div>
						<button id="removeButton" ><</button>
					</div>
					<div>
						<button id="selectAllButton" >>></button>
					</div>
					<div>
						<button id="removeAllButton" ><<</button>
					</div>
				</div>
				<div class="float-left language-list">
					<select id="selectedLanguageList" multiple="multiple" size="10" >
					</select>
				</div>
				<div style="clear: both"></div>
			</div>
		</div>
		<div class='block'>
			<h3>Default language:</h3>
			<div class='content'>
				<select id='defaultLang' title='Default language'></select>
			</div>
		</div>
		<div class='block hot-key' id='dd'>
			<h3>Hotkey:</h3>
			<div class='content'>
				<input type='radio' id='ctrlkey' name='key' value='ctrl' checked='true'/>Ctrl
				<input type='radio' id='ctrlshiftkey' name='key' value='ctrlshift' />Ctrl + Shift
				<div class='key'>
					Press any key:
					<input type='text' id='keycode' />
				</div>
			</div>
		</div>
		<button id="saveButton">Save</button>
		<div id="massageBlock" style="display:none">Options saved!</div>
	</div>
</body>

<script src="options.js"></script>
</html>